<template>
  <div>
   <el-card style="width: 100%;" >
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="审批人">
             <el-input v-model="formInline.user" placeholder="审批人"></el-input>
           </el-form-item>
           <el-form-item label="活动区域">
             <el-select v-model="formInline.region" placeholder="活动区域">
               <el-option label="区域一" value="shanghai"></el-option>
               <el-option label="区域二" value="beijing"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
             <el-button type="primary" @click="onSubmit">清空查询</el-button>
           </el-form-item>
           <el-form-item>
             <el-button type="primary"  @click="onSubmit">新建</el-button>
           </el-form-item>
         </el-form>
     </el-card>


     <!-- 表格卡片-->
     <el-card style="width: 100%;" v-bind:style="{minHeight: Height+'px'}">
     <template>
       <el-table
         :data="tableData"
         style="width: 100%">
         <el-table-column type="expand">
           <template slot-scope="props">
             <el-form label-position="left" inline class="demo-table-expand">
               <el-form-item label="商品名称">
                 <span>{{ props.row.name }}</span>
               </el-form-item>
               <el-form-item label="所属店铺">
                 <span>{{ props.row.shop }}</span>
               </el-form-item>
               <el-form-item label="商品 ID">
                 <span>{{ props.row.id }}</span>
               </el-form-item>
               <el-form-item label="店铺 ID">
                 <span>{{ props.row.shopId }}</span>
               </el-form-item>
               <el-form-item label="商品分类">
                 <span>{{ props.row.category }}</span>
               </el-form-item>
               <el-form-item label="店铺地址">
                 <span>{{ props.row.address }}</span>
               </el-form-item>
               <el-form-item label="商品描述">
                 <span>{{ props.row.desc }}</span>
               </el-form-item>
               <el-form-item label="业务进度">
               </el-form-item>
               <el-card shadow ="nerver">
                 <el-steps :active="1" >
                        <el-step title="步骤 1"></el-step>
                        <el-step title="步骤 2"></el-step>
                        <el-step title="步骤 3"></el-step>
                 </el-steps>
               </el-card>

             </el-form>
           </template>
         </el-table-column>
         <el-table-column
           label="商品 ID"
           prop="id">
         </el-table-column>
         <el-table-column
           label="商品名称"
           prop="name">
         </el-table-column>
         <el-table-column
           label="描述"
           prop="desc">
         </el-table-column>
         <el-table-column
               fixed="right"
               label="操作"
               width="200"
               >
               <template slot-scope="scope">
                       <el-button
                         size="mini"
                         @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                       <el-button
                         size="mini"
                         type="danger"
                        @click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button>
                     </template>
             </el-table-column>
       </el-table>
     </template>
    </el-card >

     <el-card  shadow="never" >
         <el-pagination
           background
           layout="prev, pager, next"
           :total="100">
         </el-pagination>
       </el-card>
  </div>
</template>

<script>
  export default {
     data() {
       return {
         Height:0,
          tableData: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                  }, {
                    id: '12987123',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                  }, {
                    id: '12987125',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                  }, {
                    id: '12987126',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                  }],
                  formInline: {
                            user: '',
                            region: ''
                          }
                  };

        },
        methods: {
            handleEdit(index, row) {
              console.log(index, row);
            },
            handleDelete(index, row) {
            	/* console.log(index, row); */
            	this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            		confirmButtonText: '确定',
            		cancelButtonText: '取消',
            		type: 'warning'
            	}).then(() => {
                  this.$message({
            			type: 'success',
            			message: '删除成功!'
            		});
            	}
              ).catch(() => {
            		this.$message({
            			type: 'info',
            			message: '已取消删除'
            		});
            	});
            },
            onSubmit() {
                    console.log('submit!');
            },
          },
         mounted(){
              //动态设置内容高度 让footer始终居底   header+footer的高度是100
              this.Height = document.documentElement.clientHeight -375;
          　　//监听浏览器窗口变化　
              window.onresize = ()=> {this.Height = document.documentElement.clientHeight -375}
            }
        }
</script>

<style>
  .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
</style>
